<template>
  <div class="common-layout">
    <el-scrollbar ref="scrollbarRef" class="content">
      <LayoutHeader />

      <el-main>
        <RouterView @scrollTop="scrollTop" />
      </el-main>

      <!-- <el-footer>Footer</el-footer> -->
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts" name="app">
import { ref } from 'vue'
import { RouterView } from 'vue-router'
import LayoutHeader from './components/LayoutHeader.vue'

const scrollbarRef = ref()

const scrollTop = () => {
  scrollbarRef.value.scrollTo(0, 0)
}
</script>

<style lang="scss" scoped>
:deep(.el-main) {
  padding: 0;
}
.content {
  height: calc(100vh);
  display: flex;
  flex-direction: column;
}
</style>
